<template>
    <div class="leave-type-picker">
      <button type="button" class="select-btn" @click="showPicker = true">
        休假类型<span class="type-display">{{ selectedTypeDisplay }}</span>
      </button>

      <div v-show="showPicker" class="picker-panel">
        <div class="picker-header">
          <h2 class="picker-title">选择休假类型</h2>
          <button type="button" class="close-btn" @click="showPicker = false">×</button>
        </div>
        <div class="picker-columns">
          <div class="column-container">
            <div class="column-wrapper">
              <div
                v-for="type in leaveTypes"
                :key="type.name"
                :class="['column-item',
                        { selected: type.name === selectedType,
                          disabled: type.hours <= 0 }]"
                @click="selectType(type)">
                {{ type.name }}（{{ type.hours }}h）
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

<script>
const LEAVE_TYPES = [
  { name: '福祉休假', hours: 168 },
  { name: '有休休假', hours: 36 },
  { name: '振休休假', hours: 24 },
  { name: '哺育休假', hours: 0 },
  { name: '劳务休假', hours: 0 },
  { name: '结婚休假', hours: 72 },
  { name: '产休休假', hours: 0 },
  { name: '育儿休假', hours: 0 },
  { name: '老人看护休假', hours: 0 },
  { name: '记引休假', hours: 0 }
]

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      showPicker: false,
      leaveTypes: LEAVE_TYPES,
      selectedType: this.value
    }
  },
  computed: {
    selectedTypeDisplay () {
      return this.selectedType
        ? this.leaveTypes.find(t => t.name === this.selectedType).name
        : '请选择'
    }
  },
  methods: {
    selectType (type) {
      if (type.hours <= 0) return
      this.selectedType = type.name
      this.showPicker = false
      this.$emit('change', type.name)
    }
  }
}
</script>

  <style scoped>
  .leave-type-picker .column-item.disabled {
    color: #ccc;
    cursor: not-allowed;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      rgba(204,204,204,0.1) 5px,
      rgba(204,204,204,0.1) 10px
    );
  }

  .type-display {
    float: right;
    color: #666;
  }
  </style>
